<template>
  <div class="aaa" ref="bbb">
    <button class="ccc" @click="go()">去吧</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: "1",
      b: "1",
      c: "1",
      scroll: ""
    };
  },

  created() {
    console.log("进来created"); //有缓存不会重新进入这个钩子函数，去掉路由中的keepAlive才会进来
   
    console.log(this.$refs.bbb,1); // 1.1测试this.$nextTick,因为created节点还未初始化,拿不到节点
    this.$nextTick(()=>{ // 1.1测试this.$nextTick,能拿到节点
      console.log(this.$refs.bbb,2); 
    })
  },
  mounted() {
    console.log(this.$refs.bbb,3);//1.2

    console.log("进来mounted"); //有缓存不会重新进入这个钩子函数，去掉路由中的keepAlive才会进来
  },
  activated() {
    // keepAlive会缓存data里面的数据，不会被摧毁，再次进来可以直接拿到
    console.log("进来activated");
    window.scrollTo(0, this.scroll);
  },
  deactivated() {
    console.log(navigator.userAgent);
    console.log("进来deactivated"); //退出页面执行
  },
  beforeRouteLeave(to, from, next) {
    this.scroll = document.documentElement.scrollTop;
    next();
  },
  methods: {
    go() {
      this.$router.push("/keepAliveB");
    }
  }
};
</script>

<style lang="less" scoped>
.aaa {
  height: 3000px;
  background-color: rgb(235, 187, 187);

  .ccc {
    margin-top: 500px;
  }
}
</style>
